<template>
  <div ref="charts_line" style="height:100%;width:100%" />

</template>
<script>
import echarts from "echarts";
export default {
  name: "DireLine",
  props: {
    options: {
      require: true,
      type: Object,
    },
  },

  data() {
    return {
      charts: null,
      lineOptions: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      },
    };
  },
  created() {
    this.initOptions();
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    initOptions() {
      // console.log(typeof(this.options) == "undefined");
      this.lineOptions =
        typeof this.options == "undefined" ? this.lineOptions : this.options;
    },
    init() {
      this.charts = echarts.init(this.$refs.charts_line);
      this.charts.setOption(this.lineOptions);
      this.$emit("sendLineEcharts", this.charts);
    },
  },
};
</script>
<style scoped lang="scss">
</style>